<template>
	<view class="app-contain">
		<water-mask></water-mask>
		<uni-swiper-dot class="uni-swiper-dot-box" :info="swiperData" :current="current" field="content">
			<!-- 		<swiper class="swiper-box" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in swiperData" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper> -->
		</uni-swiper-dot>
		<view class="grid-menu">
			<view v-for="(item, index) in menuList" :index="index" :key="index">
				<view class="grid-item-box" @click="clickMenuItem(item)">
					<view class="grid-item-box-content">
						<image class="image-icon" :fade-show="true" mode="widthFix" :src=item.icon> </image>
						<div style="height: 0.5rem;"></div>
						<text class="grid-item-box-text">{{item.text}}</text>

					</view>

				</view>
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		// name:'#menu',
		onLoad: function() {


		},

		data() {
			return {
				menuList: [{
						text: '订购',
						icon: '/static/images/menu/dg.png',
						url: 'pici/pici'
					},

					{
						text: '历史订单',
						icon: '/static/images/menu/dd.png',
						url: 'order/order'
					},

					{
						text: '本周菜谱',
						icon: '/static/images/menu/dc.png',
						url: 'cookbook/cookbook'
					},
				],
				current: 0,
				swiperDotIndex: 0,
				swiperData: [{
						image: '/static/images/banner/banner01.jpg'
					},
					{
						image: '/static/images/banner/banner02.jpg'
					},
					{
						image: '/static/images/banner/banner03.jpg'
					}
				]
			}
		},
		methods: {
			clickBannerItem(item) {
				console.info(item)
			},
			// changeSwiper(e) {
			//   this.current = e.detail.current
			// },
			// changeGrid(e) {
			//   this.$modal.showToast('模块建设中~')
			// },
			clickMenuItem(e) {
				uni.navigateTo({
					url: e.url
				})
			}
		},

	}
</script>

<style lang="scss">
	$icon-height: 70%;
	$swiper-height: 300rpx;
	$swiper-height-box: 150px;

	uni-page-body,
	uni-page-refresh {
		height: 100%;
	}

	.app-contain {
		width: 100%;
		height: 100%;
		background-color: #F6F6F6;
	}

	.grid-menu {
		width: 100%;
		// height: calc(100% - #{$swiper-height-box});
		padding: $uni-spacing-row-sm;
		display: grid;
		// justify-content: space-between;
		// background-color: #F6F6F6;
		// margin-right: 5px;
		// flex-wrap: wrap;
		grid-template-columns: 1fr 1fr;
		// justify-content: flex-start;
		// align-content: flex-start;
	}

	.grid-item-box {
		// align-content: flex-start;
		position: relative;
		width: 90%;
		padding-bottom: 95%;

		border-radius: 10px;
		background-color: #fff;
		// margin-top: $uni-spacing-row-sm;
		// margin-right:  $uni-spacing-row-sm;
		// justify-content: space-evenly;
		overflow: hidden;
margin: 5%;
	}

	.grid-item-box-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-items: center;
		position: absolute;
		padding-top: 20%;
		// height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.grid-item-box-text {
		// width: 50%;
		// height: 50%;
		display: grid;
		align-items: flex-start;
		justify-items: center;
		font-size:  5vw;
		// font-weight: bold
	}

	.image-icon {
		width:  50%;
	}

	// .content {
	//   display: flex;
	//   flex-direction: column;
	//   align-items: center;
	//   justify-content: center;
	// }

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.swiper {
		height: $swiper-height;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>